<template>
	<div id="container" :style="{height:height, width:width}"></div> 
    <div class="main">
        <div>全部</div>
        <div>小学</div>
        <div>初中</div>
        <div class="main-content">
        <div>
        各区域预报名情况
        </div>
        <div>
        热点学校排名
        </div>
        </div>
    </div>
</template>

<script lang="ts">
    import { onMounted} from 'vue';
    //高德地图
    import "@amap/amap-jsapi-types";
    import AMapLoader from "@amap/amap-jsapi-loader";
    import  json  from '@/assets/json/dongyang.json';
    export default {
		name: "amap",
        props: {
			height: { type: String, default: "100%" },
			width: { type: String, default: "100%" },
			mapStyle: { type: String, default: "amap://styles/ef8cdb08ce301fedf14e95499959f247" }
		},
        setup(props) {
            window._AMapSecurityConfig = {
                securityJsCode:'b0e4fee491bfedae04f1f537d5be3675',
            }
            let map=null;
            AMapLoader.load({
                key: 'a8c8cd6f81adebeefa3969999da095c3', //设置您的key
                version: '2.0',
                plugins: ['AMap.ToolBar', 'AMap.Driving'],
                AMapUI: {
                    version: '1.1',
                    plugins: [],
                },
                Loca: {
                    version: '2.0.0',
                },
            }).then((AMap) => {
                window.AMap=AMap
                AMap.plugin('AMap.DistrictSearch', function () {
                    var districtSearch: AMap.DistrictSearch = new AMap.DistrictSearch({
                        // 返回行政区边界坐标等具体信息
                        extensions: 'all',
                        // 设置查询行政区级别为 区
                        level: 'district',
                    });

                    // 搜索行政区划信息
                    districtSearch.search('东阳市', function (status, result) {
                        // 查询成功时，result即为对应的行政区信息
                        const bounds = result.districtList[0].boundaries;
                        let mask = [];
                        for (var i = 0; i < bounds.length; i += 1) {
                            mask.push([bounds[i]]);
                        }
                        map = new AMap.Map('container', {
                            mask: mask,
                            center: [120.307702,29.10085],
                            viewMode: '3D',
                            rotateEnable:true,
                            pitchEnable:true,
                            showLabel: false,
                            zoom: 11.5,
                            zooms:[10.4,22],
                            pitch: 55,
                            rotation: -15,
                            mapStyle:props.mapStyle
                            
                        });
                        //添加描边
                        /*** 
                        for (let i = 0; i < bounds.length; i += 1) {
                            new AMap.Polyline({
                            path: bounds[i],
                            strokeColor: '#ffffff',
                            strokeWeight: 2,
                            map: map,
                            });
                        }*/
                        //添加行政区划图层
                        /** */
                        AMap.plugin('AMap.GeoJSON', function () {
                            var geojson = new AMap.GeoJSON({
                                geoJSON: json,
                                // 还可以自定义getMarker和getPolyline
                                getPolygon: function(geojson, lnglats) {
                                    // 计算面积
                                    let polygon =new AMap.Polygon({
                                        path: lnglats,
                                        fillOpacity: 0,// 面积越大透明度越高
                                        strokeColor: 'white',
                                        strokeWeight: 1,
                                        fillColor: 'red',
                                        zooms:[10.4,15]
                                    });
                                    polygon.on('mouseover', () => {
                                    polygon.setOptions({
                                        fillOpacity: 0.5,
                                        fillColor: '#7bccc4',
                                    })
                                    })
                                    polygon.on('mouseout', () => {
                                    polygon.setOptions({
                                        fillOpacity: 0,
                                        fillColor: '#ccebc5'
                                    })})
                                    return polygon;
                                }
                            });
                            map.add(geojson);
                        })
                        let loca = new Loca.Container({
                            map,
                        });
                        //添加蜂巢热力图
                        /*** 
                        
                        loca.ambLight = {
                            intensity: 0.4,
                            color: '#ced5ed',
                        };
                        loca.dirLight = {
                            intensity: 0.02,
                            color: '#666',
                            target: [10, 10, 10],
                            position: [0, -1, 0.1],
                        };
                        loca.pointLight = {
                            color: 'rgb(155,173,80)',
                            position: [120.14133, 30.246611, 20000],
                            intensity: 2.2,
                            // 距离表示从光源到光照强度为 0 的位置，0 就是光不会消失。
                            distance: 40000,
                        };
                        let geo = new Loca.GeoJSONSource({
                            data: {
                            "type": "FeatureCollection",
                            "features": [
                                {
                                    "type": "Feature",
                                    "properties": {name:'吴宁一校',count:100},
                                    "geometry": {
                                        "type": "Point",
                                        "coordinates": [
                                            120.234431,29.260805
                                        ]
                                    }
                                },
                                {
                                    "type": "Feature",
                                    "properties": {name:'吴宁二校',count:200},
                                    "geometry": {
                                        "type": "Point",
                                        "coordinates": [
                                            120.22752,29.263328
                                        ]
                                    }
                                },
                                {
                                    "type": "Feature",
                                    "properties": {name:'吴宁一中',count:300},
                                    "geometry": {
                                        "type": "Point",
                                        "coordinates": [
                                            120.238313,29.265589
                                        ]
                                    }
                                }
                            ]
                            },
                        });

                        let ll = new Loca.HexagonLayer({
                            // loca,
                            zIndex: 10,
                            opacity: 1,
                            visible: true,
                            zooms: [2, 15],
                            acceptLight: true,
                        });

                        let colors = ['#FF0000', '#FFFF00', '#008000'].reverse();
                        let heights = [3000, 2000, 1000];
                        ll.setSource(geo);
                        const sum=(arr)=> {
                            var sum = 0;
                            arr.forEach(a => {
                                sum += a.properties.count;
                            });
                            return sum;
                        }
                        ll.setStyle({
                            unit: 'meter',
                            radius: 120,
                            gap: 0,
                            altitude: 0,
                            height: function (index, feature) {
                                var ranks = sum(feature.coordinates);
                                // return ranks < 60 ? heights[2] : heights[6];
                                let height=100;
                                if(ranks<=100){
                                    height=heights[2]
                                }else if(ranks>100&&ranks<=200){
                                    height=heights[1]
                                }else{
                                    height=heights[0]
                                }
                                return height
                            },
                            topColor: function (index, feature) {
                                var ranks = sum(feature.coordinates);
                                let color=null;
                                if(ranks<=100){
                                    color=colors[2]
                                }else if(ranks>100&&ranks<=200){
                                    color=colors[1]
                                }else{
                                    color=colors[0]
                                }
                                return color
                            },
                            sideBottomColor: function (index, feature) {
                                var ranks = sum(feature.coordinates);
                                let color=null;
                                if(ranks<=100){
                                    color=colors[2]
                                }else if(ranks>100&&ranks<=200){
                                    color=colors[1]
                                }else{
                                    color=colors[0]
                                }
                                return color
                            },
                            sideTopColor: function (index, feature) {
                                var ranks = sum(feature.coordinates);
                                let color=null;
                                if(ranks<=100){
                                    color=colors[2]
                                }else if(ranks>100&&ranks<=200){
                                    color=colors[1]
                                }else{
                                    color=colors[0]
                                }
                                return color
                            }
                        })
                        loca.add(ll);
                         // 高度升起动画
                        map.on('complete', function () {
                        setTimeout(function () {
                            ll.show(500);
                            ll.addAnimate({
                            key: 'height',
                            value: [0, 1],
                            duration: 500,
                            easing: 'Linear',
                            transform: 500,
                            random: true,
                            delay: 10000,
                            });
                        }, 800);
                        });
                        */
                        // 蓝色普通点
                        var geoB = new Loca.GeoJSONSource({
                            data: {
                            "type": "FeatureCollection",
                            "features": [
                                {
                                    "type": "Feature",
                                    "properties": {name:'吴宁一校',count:100},
                                    "geometry": {
                                        "type": "Point",
                                        "coordinates": [
                                            120.234431,29.260805
                                        ]
                                    }
                                },
                                {
                                    "type": "Feature",
                                    "properties": {name:'吴宁二校',count:200},
                                    "geometry": {
                                        "type": "Point",
                                        "coordinates": [
                                            120.22752,29.263328
                                        ]
                                    }
                                },
                                {
                                    "type": "Feature",
                                    "properties": {name:'吴宁一中',count:300},
                                    "geometry": {
                                        "type": "Point",
                                        "coordinates": [
                                            120.238313,29.265589
                                        ]
                                    }
                                }
                            ]
                            },
                        });
                        var scatter = new Loca.ScatterLayer({
                            zIndex: 111,
                            opacity: 1,
                            visible: true,
                            zooms: [2, 15],
                        });
                        scatter.setSource(geoB);
                        scatter.setStyle({
                            color: 'rgba(43,156,75,1)',
                            unit: 'meter',
                            size: [500, 500],
                            borderWidth: 0,
                        });
                        loca.add(scatter);

                        // 红色呼吸点
                        var geoLevelF = new Loca.GeoJSONSource({
                            data: {
                            "type": "FeatureCollection",
                            "features": [
                                {
                                    "type": "Feature",
                                    "properties": {name:'吴宁一校',count:100},
                                    "geometry": {
                                        "type": "Point",
                                        "coordinates": [
                                            120.235431,29.270805
                                        ]
                                    }
                                },
                                {
                                    "type": "Feature",
                                    "properties": {name:'吴宁二校',count:200},
                                    "geometry": {
                                        "type": "Point",
                                        "coordinates": [
                                            120.23752,29.253328
                                        ]
                                    }
                                },
                                {
                                    "type": "Feature",
                                    "properties": {name:'吴宁一中',count:300},
                                    "geometry": {
                                        "type": "Point",
                                        "coordinates": [
                                            120.239313,29.285589
                                        ]
                                    }
                                }
                            ]
                            },
                        });
                        var breathRed = new Loca.ScatterLayer({
                            loca,
                            zIndex: 113,
                            opacity: 1,
                            visible: true,
                            zooms: [2, 15],
                        });
                        breathRed.setSource(geoLevelF);
                        breathRed.setStyle({
                            unit: 'meter',
                            size: [2600, 2600],
                            borderWidth: 0,
                            texture: 'https://a.amap.com/Loca/static/loca-v2/demos/images/breath_red.png',
                            duration: 500,
                            animate: true,
                        });

                        
 

                        loca.animate.start();
                        
                    });
                });
            });
            onMounted(()=>{
                
            });
            
        }
    }
</script>
<style scoped lang="scss">
.main {
    position: absolute;
    top: 100px;
    left: 0;
    z-index: 1;
    width: 100%;
    color:#fff;
    .main-content{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>